<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朝阳区档案馆</title>
    <link rel="stylesheet" href="../assets/common/common.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 上方图片区域 -->
    <div class="header-image">
        <div class="carousel-container">
            <img src="../assets/pic-tip.png" alt="标题" class="carousel-image">
            <div class="carousel-slide carousel-slide-1">
            </div>
            <div class="carousel-slide carousel-slide-2">
            </div>
            <div class="carousel-slide carousel-slide-3">
            </div>
            <div class="carousel-slide carousel-slide-4">
            </div>
            <!-- 轮播图指示器 -->
            <div class="carousel-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
            </div>
        </div>
        <div class="login-register">
            <div class="login">登录</div>
            <span style="margin:0 10px;">|</span>
            <div class="register">注册</div>
        </div>
    </div>

    <!-- 中间菜单区域 -->
    <div class="menu-container">
        <ul class="main-menu">
            <li class="menu-item active" data-menu="home">首页</li>
            <li class="menu-item" data-menu="status">工作动态
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="status1">馆办动态</li>
                    <li class="submenu-item" data-submenu="statu2">业内动态</li>
                </ul>
            </li>
            <li class="menu-item" data-menu="notices">通知公告</li>
            <li class="menu-item has-submenu" data-menu="services">
                公众服务
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="service4">查档指南</li>
                    <li class="submenu-item" data-submenu="service5">开放档案</li>
                    <li class="submenu-item" data-submenu="service1">观展预约</li>
                    <li class="submenu-item" data-submenu="service3">档案捐赠</li>
                    <li class="submenu-item" data-submenu="service2">业务咨询</li>

                </ul>
            </li>

            <li class="menu-item " data-menu="culture">档案方志文化
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="culture2">朝阳兰台</li>
                    <li class="submenu-item" data-submenu="culture3">志鉴文化</li>
                    <li class="submenu-item" data-submenu="culture1">网上展厅</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="home-content">
        <div class="bar"></div>

        <div class="home-content-container">
            <!-- 馆办动态和业内动态 -->
            <div class="overview-section">
                <div class="overview-image">
                    <div class="overview-carousel-container">
                        <img src="../assets/jiaodian.png" alt="朝阳区档案馆" class="overview-slide">
                        <img src="../assets/WechatIMG7437-2.png" alt="朝阳区档案馆" class="overview-slide">
                        <img src="../assets/WechatIMG7437.png" alt="朝阳区档案馆" class="overview-slide">
                        <div class="overview-indicators"></div>
                    </div>
                </div>
                <div class="tab-container">
                    <div class="section-title">
                        <span class="section-title-pre">单位概况</span>
                        <span class="section-title-pre">馆办动态</span>
                        <span class="section-title-pre">业内动态</span>
                        <div class="more">更多<img src="../assets/more-icon.png" /></div>
                    </div>
                    <!-- 单位概况 -->
                    <div id="overview-unit" class="tab-content">
                        <div class="unit-intro">
                            <p>朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位,
                                朝阳区档案馆是中国国家档案馆的一个分支机构，成立于1952年，是中国国家档案馆的一个重要单位</p>
                        </div>
                    </div>
                    <!-- 馆办动态内容 -->
                    <div id="overview-content" class="tab-content">
                        <ul class="dynamic-list">
                            <li class="dynamic-item">
                                <div class="title">1朝阳区档案馆开展2024年度档案业务培训</div>
                                <div class="date">2024-08-25</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">2区档案馆举办"铭记历史 砥砺前行"主题展览</div>
                                <div class="date">2024-08-18</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">3朝阳区档案信息化建设项目顺利通过验收</div>
                                <div class="date">2024-08-10</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">4区档案馆组织参观学习全国档案工作先进单位</div>
                                <div class="date">2024-08-05</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">5朝阳区档案馆召开2024年半年工作会议</div>
                                <div class="date">2024-07-28</div>
                            </li>
                        </ul>
                    </div>

                    <!-- 业内动态内容 -->
                    <div id="work-dynamic-content" class="tab-content" style="display: none;">
                        <ul class="dynamic-list">
                            <li class="dynamic-item">
                                <div class="title">朝阳区档案馆开展2024年度档案业务培训</div>
                                <div class="date">2024-08-25</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">区档案馆举办"铭记历史 砥砺前行"主题展览</div>
                                <div class="date">2024-08-18</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">朝阳区档案信息化建设项目顺利通过验收</div>
                                <div class="date">2024-08-10</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">区档案馆组织参观学习全国档案工作先进单位</div>
                                <div class="date">2024-08-05</div>
                            </li>
                            <li class="dynamic-item">
                                <div class="title">朝阳区档案馆召开2024年半年工作会议</div>
                                <div class="date">2024-07-28</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 法规标准和通知公告 -->
            <div class="regulations-notices">

                <div class="notices">
                    <div class="section-title">
                        <span class="section-title-last"><i>通知</i>公告</span>
                        <div class="more">更多<img src="../assets/more-icon.png" /></div>
                    </div>
                    <ul class="notices-list">
                        <li class="notices-item">
                            <span class="title">关于开展2024年档案执法检查工作的通知</span>
                            <div class="date-range">
                                <span class="date-range-first">23</span>
                                <span class="date">2024-08</span>
                            </div>
                        </li>
                        <li class="notices-item">
                            <span class="title">朝阳区档案馆关于国庆节期间闭馆的通知</span>
                            <div class="date-range">
                                <span class="date-range-first">23</span>
                                <span class="date">2024-08</span>
                            </div>
                        </li>
                        <li class="notices-item">
                            <span class="title">关于征集"朝阳区发展历程"相关档案资料的公告</span>
                            <div class="date-range">
                                <span class="date-range-first">23</span>
                                <span class="date">2024-08</span>
                            </div>
                        </li>
                        <li class="notices-item">
                            <span class="title">朝阳区档案馆2024年档案专业技术职务评审工作通知</span>
                            <div class="date-range">
                                <span class="date-range-first">23</span>
                                <span class="date">2024-08</span>
                            </div>
                        </li>
                        <li class="notices-item">
                            <span class="title">关于举办"档案与文化传承"学术研讨会的通知</span>
                            <div class="date-range">
                                <span class="date-range-first">23</span>
                                <span class="date">2024-08</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 平台链接 -->
                <div class="platform-links">
                    <a href="https://www.saac.gov.cn/">
                        <div class="platform-item-1">
                        </div>
                    </a>
                    <a href="https://www.bjma.gov.cn/">
                        <div class="platform-item-2">
                        </div>
                    </a>
                    <a href="https://cxly.saac.gov.cn/">
                        <div class="platform-item-3">
                        </div>
                    </a>
                </div>
            </div>

            <div class="quick-access-container">
                <!-- 快捷入口 -->
                <div class="quick-access">
                    <div class="access-item">
                        <img src="../assets/icon-left.png" alt="">
                        <p>开放档案</p>
                    </div>
                    <div class="access-item">
                        <img src="../assets/icon-center.png" alt="">
                        <p>档案捐赠</p>
                    </div>
                    <div class="access-item">
                        <img src="../assets/icon-right.png" alt="">
                        <p>业务咨询</p>
                    </div>
                </div>


            </div>

            <!-- 编研成果和志鉴案例 -->
            <div class="research-cases">
                <div class="section-title">
                    <span class="section-title-pre">编研成果</span>
                    <span class="section-title-pre">馆藏年鉴</span>
                    <div class="more">更多<img src="../assets/more-icon.png" /></div>
                </div>
                <div id="research-content" class="cases-tab-content">
                    <div class="carousel-arrows">
                        <div class="arrow left-arrow research-left-arrow">&lt;</div>
                        <div class="arrow right-arrow research-right-arrow">&gt;</div>
                    </div>
                    <div class="research-container">
                        <div class="cases-container">
                            <div class="case-item">
                                <img src="../assets/result-pic-1.png" class="result-pic-1" alt="朝阳区编研成果">
                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-2.png" class="result-pic-2" alt="朝阳区编研成果">

                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-1.png" class="result-pic-3" alt="朝阳区编研成果">

                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-2.png" class="result-pic-4" alt="朝阳区编研成果">
                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-1.png" class="result-pic-4" alt="朝阳区编研成果">
                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-2.png" class="result-pic-4" alt="朝阳区编研成果">
                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-1.png" class="result-pic-4" alt="朝阳区编研成果">
                            </div>
                            <div class="case-item">
                                <img src="../assets/result-pic-2.png" class="result-pic-4" alt="朝阳区编研成果">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="cases-content" class="cases-tab-content" style="display: none;">
                    <div class="carousel-arrows">
                        <div class="arrow left-arrow cases-left-arrow">&lt;</div>
                        <div class="arrow right-arrow cases-right-arrow">&gt;</div>
                    </div>
                    <div class="research-container">
                        <div class="cases-container">
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/编组 12.png" alt="朝阳区志鉴">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/3.png" alt="朝阳大事记">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/Snipaste_2025-08-30_14-29-32.png" alt="朝阳区地名志">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/WechatIMG7437.png" alt="朝阳区人物志">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/WechatIMG7437.png" alt="朝阳区人物志">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/WechatIMG7437.png" alt="朝阳区人物志">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/WechatIMG7437.png" alt="朝阳区人物志">
                                </div>
                            </div>
                            <div class="case-item">
                                <div class="case-image">
                                    <img src="../assets/WechatIMG7437.png" alt="朝阳区人物志">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 网上展厅 -->
            <div class="online-exhibition">
                <div class="section-title">
                    <span class="section-title-last"><i>网上</i>展厅</span>
                    <div class="more">更多<img src="../assets/more-icon.png" /></div>

                </div>
                <div id="exhibition-content" class="exhibition-tab-content">
                    <div class="exhibition-container">

                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/3.png" alt="朝阳区历史文化展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437.png" alt="朝阳区名人展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437-2.png" alt="朝阳区非物质文化遗产展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437-2.png" alt="朝阳区非物质文化遗产展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437-2.png" alt="朝阳区非物质文化遗产展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437-2.png" alt="朝阳区非物质文化遗产展">
                            </div>
                        </div>
                        <div class="exhibition-item">
                            <div class="exhibition-image">
                                <img src="../assets/WechatIMG7437-2.png" alt="朝阳区非物质文化遗产展">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="other-content-container" style="display: none;">
        </div>
    </div>

    <!-- 下方信息页 -->
    <div class="footer-info">
        <div class="footer-content">
            <div class="footer-links">
                <div class="footer-section">
                    <p>友情链接</p>
                    <p>联系我们</p>
                    <p>版权声明</p>

                </div>

            </div>
            <p>京ICP备05008885号 京公网安备11010102003012号</p>
            <div class="footer-copyright">
                <p>版权所有： 2023 朝阳区档案馆.</p>
            </div>
            <img src="../assets/shiyedanwei.png" class="shi-icon">
        </div>
    </div>

    <script src="../assets/common/common.js"></script>
    <script src="script.js"></script>
    
    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户登录</h2>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input type="text" id="loginUsername" name="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" name="password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" name="remember"> 记住我
                        </label>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>
                    <button type="submit" class="submit-btn">登录</button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户注册</h2>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input type="text" id="registerUsername" name="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input type="password" id="registerPassword" name="password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-group">
                        <label for="registerConfirmPassword">确认密码</label>
                        <input type="password" id="registerConfirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                    </div>
                    <div class="form-group">
                        <label for="registerEmail">邮箱</label>
                        <input type="email" id="registerEmail" name="email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-options">
                        <label class="agree-terms">
                            <input type="checkbox" name="agreeTerms" required> 我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a>
                        </label>
                    </div>
                    <button type="submit" class="submit-btn">注册</button>
                </form>
            </div>
        </div>
    </div>
</body>

</html>